<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>采购方询单操作</title>
	<style type="text/css">
	*{margin: 0; padding: 0;}
	 .page{ width:1200px; margin: 0 auto; overflow: hidden; position: relative; display: none;}
   .page1{ display: block; }
	 .page img{ width: 100%}
      .page:nth-child(1){display: block;}
       .pane{border: 2px solid red}
       .pane1{ width: 152px; height: 54px; position: absolute; top: 8.9%; right: 18.7%}
       .pane2{ width: 340px; height: 50px; position: absolute; top:44.1%; right: 7%}
       .pane3{ width: 124px; height: 42px; position: absolute; top:9.2%; right: 6%}
       .pane4{ width: 124px; height: 30px; position: absolute; top:69.2%; left: 8.8%}
       .pane5{ width: 246px; height: 106px; position: absolute; top:46%; left:30.6%}
       .pane6{ width: 48px; height: 32px; position: absolute; bottom: 11.7%; right:16.8%}
       .pane6_2{ width: 686px; height: 104px; position: absolute; top: 16.3%; right:17.2%}
       .pane7{ width: 68px; height: 28px; position: absolute; top:51%; left:56.3%}
       .pane7_2{ width: 88px; height: 24px; position: absolute; top:43.2%; left:44.6%}
       .pane8{ width: 54px; height: 28px; position: absolute; bottom: 32.6%; right:15.6%}
       .pane9{ width: 66px; height: 30px; position: absolute; top:12.8%; right:20%}
       .pane9_1{ width: 84px; height: 30px; position: absolute; bottom:28.6%; right:26%}
       .pane10_2{ width: 736px; height: 238px; position: absolute; bottom: 20.3%; right:14.6%}
       .pane10{ width: 50px; height: 30px; position: absolute; bottom:31.8%; right:18.2%}
       .pane11{ width: 50px; height: 30px; position: absolute; top:43.3%; right:35.9%}
       .pane12{ width: 50px; height: 30px; position: absolute; bottom:32%; right:18.1%}
       .pane13{ width: 60px; height: 30px; position: absolute; bottom:15.5%; right:19.3%}
        .pane14{ width: 50px; height: 30px; position: absolute; bottom:37.2%; right:35.7%}
       .pane15{ width: 72px; height: 30px; position: absolute; top:34.8%; right:21.4%}
       .pane16{ width:300px; height: 30px; position: absolute; top:25.3%; left:31%}
       .pane16_2{ width: 50px; height: 30px; position: absolute; top:47.5%; right:31.8%}
        .pane17{ width: 50px; height: 30px; position: absolute; bottom:39.4%; right:15.7%}
       .pane18{ width: 68px; height: 30px; position: absolute; top:34.7%; right:19.6%}
       .pane19{ width: 50px; height: 30px; position: absolute; bottom:51.4%; right:35.8%}
       .pane20{ width: 68px; height: 30px; position: absolute; top:22.7%; right:15%}
       .pane21{ width: 68px; height: 34px; position: absolute; bottom:9.8%; right:23.3%}
       .pane22{ width: 56px; height: 34px; position: absolute; bottom:22.1%; right:14.2%}
       .pane23{ width: 80px; height: 34px; position: absolute; bottom:44%; right:28.1%}
       .pane24{ width: 50px; height: 30px; position: absolute; bottom:10.5%; right:18.3%}
       .pane25{ width: 56px; height: 34px; position: absolute; bottom:13.2%; right:18.6%}
       .pane26{ width: 72px; height: 34px; position: absolute; bottom:40%; right:37.5%}
        .pane26_2{ width: 100px; height: 30px; position: absolute; bottom:48.4%; right:46.9%}
       .pane27{ width: 50px; height: 30px; position: absolute; top:34.9%; right:15.8%}
        .pane28{ width: 80px; height: 34px; position: absolute; bottom:12.6%; right:14.3%}
        .pane29{ width: 50px; height: 30px; position: absolute; top:42.4%; right:31.6%}
        .pane30{ width: 60px; height: 30px; position: absolute; top:19.4%; right:15.3%}
        .pane31{ width: 60px; height: 30px; position: absolute; top:19.4%; right:15.3%}
	</style>
	<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
	<div class="page page1">
	  <img src="images/caigoufang-1 -1.png">
	  <div class="pane pane1"></div>
	</div>
	<div class="page page2">
		<img src="images/caigoufang-2.png">
          <div class="pane pane2"></div>
	</div>
	<div class="page page3 to800">
		<img src="images/caigoufang-3.png">
          <div class="pane pane3"></div>
	</div>
  <div class="page page4">
    <img src="images/caigoufang-4.png">
          <div class="pane pane4"></div>
  </div>

  <div class="page page5">
    <img src="images/caigoufang-5.png">
          <div class="pane pane5"></div>
  </div>
  <div class="page page6">
   <img src="images/tip-1.png" style="position:absolute; top: 220px; right:40px; width:166px">
    <img src="images/caigoufang-6.png">
          <div class="pane pane6"></div>
          <div class="pane pane6_2"></div>
  </div>
  <div class="page page7">
    <img src="images/caigoufang-7.png">
          <div class="pane pane7"></div>
          <div class="pane pane7_2"></div>
  </div>
  <div class="page page8">
    <img src="images/caigoufang-8.png">
          <div class="pane pane8"></div>
  </div>
  <div class="page page9">
    <img src="images/caigoufang-9.png">
          <div class="pane pane9"></div>
  </div>
  <div class="page page9_1">
    <img src="images/caigoufang-9-1.png">
          <div class="pane pane9_1"></div>
  </div>
  <div class="page page10">
     <img src="images/tip-2.png" style="width:128px; position:absolute; bottom: 220px; right:40px">
    <img src="images/caigoufang-9.png">
          <div class="pane pane10"></div>
          <div class="pane pane10_2"></div>
  </div>
  <div class="page page11">
    <img src="images/caigoufang-9-2.png">
          <div class="pane pane11"></div>
  </div>
  <div class="page page12 to1200">
    <img src="images/caigoufang-9.png">
          <div class="pane pane12"></div>
  </div>
  <div class="page page13">
    <img src="images/caigoufang-10.png">
          <div class="pane pane13"></div>
  </div>
  <div class="page page14">
    <img src="images/caigoufang-11.png">
          <div class="pane pane14"></div>
  </div>
  <div class="page page15">
    <img src="images/caigoufang-12.png">
          <div class="pane pane15"></div>
  </div>
  <div class="page page16">
    <img src="images/caigoufang-9-3.png">
          <div class="pane pane16"></div>
          <div class="pane pane16_2"></div>
  </div>
  <div class="page page17">
    <img src="images/caigoufang-13.png">
          <div class="pane pane17"></div>
  </div>
  <div class="page page18">
    <img src="images/caigoufang-14.png">
          <div class="pane pane18"></div>
  </div>
  <div class="page page19">
    <img src="images/caigoufang-15.png">
          <div class="pane pane19"></div>
  </div>
  <div class="page page20 to800">
    <img src="images/caigoufang-16.png">
          <div class="pane pane20"></div>
  </div>
  <div class="page page21">
    <img src="images/caigoufang-17.png">
          <div class="pane pane21"></div>
  </div>
  <div class="page page22">
    <img src="images/caigoufang-17-1.png">
          <div class="pane pane22"></div>
  </div>
  <div class="page page23 to800">
    <img src="images/caigoufang-17.png">
          <div class="pane pane23"></div>
  </div>
  <div class="page page24 to800">
    <img src="images/caigoufang-18.png">
          <div class="pane pane24"></div>
  </div>
  <div class="page page25">
    <img src="images/caigoufang-19.png">
          <div class="pane pane25"></div>
  </div>
  <div class="page page26">
    <img src="images/caigoufang-20.png">
          <div class="pane pane26"></div>
          <div class="pane pane26_2"></div>
  </div>
  <div class="page page27 to1200">
    <img src="images/caigoufang-21.png">
          <div class="pane pane27"></div>
  </div>
  <div class="page page28">
    <img src="images/caigoufang-22.png">
          <div class="pane pane28"></div>
  </div>
  <div class="page page29">
    <img src="images/caigoufang-23.png">
          <div class="pane pane29"></div>
  </div>
  <div class="page page30">
    <img src="images/caigoufang-24.png">
          <div class="pane pane30"></div>
  </div>
  <div class="page page31 last">
    <img src="images/caigoufang-25.png">
  </div>
	<script>
                $(function(){
                	var timer;
                     <!--闪烁效果-->
                	timer1=setInterval(function(){
                		$(".pane").toggle()
                	},600);

                       <!--点击下一页-->
                	$(".page").click(function(){
                        if($(this).hasClass('to800')){
                          $(this).hide();
                          $(this).next().stop().show(0,function(){
                            $('html, body').animate({  
                                 scrollTop: 800  
                             },100); 
                          })
                        }
                        if($(this).hasClass('to1200')){
                          $(this).hide();
                          $(this).next().stop().show(0,function(){
                            $('html, body').animate({  
                                 scrollTop: 1200  
                             },100); 
                          })
                        }
                         if($(this).hasClass('last')){
                          return false;
                        }
                        else{
                          $(this).hide();
                          $(this).next().stop().show()
                        } 
                  })
                })
	</script>
</body>
</html>